<template>
	<view>
		<global-loading />
		<view class="totalClient-topBackImg flex-items flex-column">
			<view class="topBg">
				<view class="font-color-8A734A mar-top-30 fs60">{{data.total}}</view>
				<view class="font-color-000">累计(人）</view>
			</view>
		</view>
		<view class="content directAwardInfo">
			<view class="directAwardTit fs32 font-color-333">我的好友</view>
			<view class="flex-center clientList-box mar-top-30" v-for="(item, index) in data.list" :key="index">
				<view class="directAward-box font-color-656 fs26" @click="arrowTypeChange1(index)">
					<view class="directAward-icon flex-row-plus flex-items flex-sp-between">
						<view>
							<view class="flex-row-plus flex-items flex-sp-between">
								<label class="orderId-box name font-color-000 fs28">好友昵称：{{item.name}}</label>
								<label class="orderId-box font-color-F3641E fs28">贡献值：{{item.distributorStatic.settle|0}}</label>
							</view>
						</view>
						<image v-if="item.ifOpen == false" class="arrow-down"
							:src="`${VUE_APP_STATIC_URL}static/images/arrowDownIcon.png`"></image>
						<image v-if="item.ifOpen == true" class="arrow-down"
							:src="`${VUE_APP_STATIC_URL}static/images/arrowUpIcon.png`"></image>
					</view>
					<view v-if="item.ifOpen == true">
						<view class="flex-row-plus flex-itdistributionOrderems mar-top-30 flex-sp-between">
							<label class="orderId-box">手机号：{{item.phone}}</label>
						</view>
						<view class="flex-row-plus flex-itdistributionOrderems mar-top-30 flex-sp-between">
							<label class="orderId-box ">累计下单数：{{item.distributorStatic.orderNum|0}}</label>
							<label
								class="commission-box mar-left-70 ">累计消费金额：¥{{item.distributorStatic.money|0}}</label>
						</view>
					</view>
				</view>
			</view>
			<view class="reachBottom" v-if="noMore && topLeft > 400">
				<image class="reach-icon" :src="`${VUE_APP_STATIC_URL}static/img/reachBottom.png`" mode="widthFix">
				</image>
				<text class="reach-text">这里到底了哦~~</text>
			</view>
			<view v-if="ifEmpty" class="emptyCart-box flex-items-plus flex-column">
				<image class="emptyCart-img" :src="`${VUE_APP_STATIC_URL}static/img/bgnull.png`"></image>
				<label class="font-color-999 fs26 mar-top-30">这里空空如也~</label>
			</view>
		</view>
		<!-- 回到顶部 -->
		<ReturnTop :returnTopFlag="returnTopFlag" />
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		request
	} from '../../utils/request'
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	import API from "../../config/api";

	const item = ref({})

	const topLeft = ref(0); // 无更多数据显示距离
	const returnTopFlag = ref(false); // 返回顶部显示隐藏
	const noMore = ref(false); // 没有更多数据显示隐藏
	const ifEmpty = ref(false)
	const shopId = ref(0)
	const distributorId = ref(0)
	const page = ref(1) // 当前页
	const pageSize = ref(10) // 每页记录数
	const loadingType = ref(0)
	const data = ref({
		total: 0,
		list: []
	}) // 我的客户信息列表数据

	onLoad((options) => {
		getData()
	})

	onReachBottom(() => {
		if (noMore.value) {
			uni.stopPullDownRefresh()
		} else {
			pageSize.value = pageSize.value + 10
			getData()
		}
	})
	/**
	 * 获取我的客户信息列表数据
	 * @returns {Promise<void>}
	 */
	const getData = async () => {
		try {
			const res = await request(API.promotionMyPromotion, {
				pageNum: page.value,
				pageSize: pageSize.value
			}, 'POST')
			uni.hideLoading()
			
			data.value.list = data.value.list.concat(res.data.list)
			data.value.total = res.data.statics
			if (data.value.list.length >= res.data.statics) {
				noMore.value = true
			}
			if (data.value.list.length == 0) {
				ifEmpty.value = true
			}
		} catch (err) {
			uni.hideLoading()
		}
	}
	/**
	 * 展开当前我的客户信息数据
	 * @param arrowTypeId 当前索引
	 */
	const arrowTypeChange1 = (arrowTypeId) => {
		data.value.list[arrowTypeId].ifOpen = !data.value.list[arrowTypeId].ifOpen
	}
	onPageScroll(e => {
		returnTopFlag.value = e.scrollTop > 600;
		topLeft.value = e.scrollTop
	})
</script>

<style lang="scss">
	@import "../../style/images";

	page {
		background: #333333;
	}

	.emptyCart-box {
		margin-top: 300rpx;

		.emptyCart-img {
			width: 216rpx;
			height: 156rpx;
		}
	}

	.totalClient-topBackImg {
		width: 100%;
		padding: 0 20rpx;

		.topBg {
			width: 100%;
			height: 196rpx;
			background: $totalPersonnelTopBackImg no-repeat;
			background-size: contain;
			margin-top: 50rpx;
			text-align: center;
		}

		.content {
			width: 690rpx;
			background-color: #FFFFFF;

			.totalClient-left {
				width: 170rpx;
				height: 20rpx;
			}

			.massage-text {
				padding: 0 20rpx;
			}
		}
	}

	.top {
		height: 50rpx;
		background-image: linear-gradient(#FF8E14, #FFFFFF);
	}

	.directAwardInfo {
		width: 100%;
		height: 100vh;
		background: #F8F8F8;
		padding: 0 20rpx;

		.directAwardTit {
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			color: #000A16;
			text-align: center;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #EEEEEE;
			font-weight: bold;
		}
	}

	.uni-collapse-cell[data-v-8f47561c] {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		border-color: #c8c7cc;
		border-bottom-width: 1px;
		border-bottom-style: none;
	}

	.directAward-box {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 45rpx 20rpx;

		.orderId-box {
			width: 320rpx;
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
		}

		label.name {
			font-weight: bold;
		}

		.commission-box {
			text-align: right;
		}

		.arrow-down {
			width: 24rpx;
			height: 24rpx;
		}

		.upBox {
			border-top: 1rpx solid #EDEDED;
			margin-top: 30rpx;
		}
	}
</style>